<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <unit-table
        ref="approvalable"
        :columns="this.$staticMenu.approvalColumns"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :type="tableType"
        :url="tableUrl"
        rowKeyName="id"
        @onSelect="tableOnSelect"
      >
        <!-- 补充表格操作 -->
        <div slot='tableAct' class="actionBtn">
          <a-button type="primary" @click="acceptAll">
            <a-icon type="check"/>
            审批通过
          </a-button>
          <a-button @click="rejectAll">
            <a-icon type="close"/>
            拒绝
          </a-button>
        </div>
        <!-- end -->
        <!-- 补充表格每行的操作 -->
        <span slot="tableRowAct" slot-scope="props">
					<a @click="accept(props.record)">
						<span class="ant-tag ant-tag-green">
							<a-icon type="check"/> 审批通过
						</span>
					</a>
					<a-divider type="vertical"/>
					<a @click="reject(props.record)">
						<span class="ant-tag ant-tag-volcano">
							<a-icon type="close"/> 拒绝
						</span>
					</a>
				</span>
      </unit-table>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import {APPROVALACCEPT, APPROVALREJECT, GETAPPROVALLIST} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"

  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: 'approval',
    components: {
      unitTable
    },
    data() {
      return {
        tableSelectedKeys: [],
        tableUrl: GETAPPROVALLIST.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETAPPROVALLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40']
      }
    },
    methods: {
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      },
      acceptAll() {
        let self = this
        const selectedRowKeys = self.tableSelectedKeys
        var param = {
          ids: selectedRowKeys,
          userId: 1
        }
        if (selectedRowKeys.length > 0) {
          APPROVALACCEPT(param, function (res) {
            self.$message.success(res.message)
            self.reload()

          })
        } else {
          self.$message.warning("请在表格中勾选要审批的数据！")
        }
      },
      rejectAll() {
        let self = this
        const selectedRowKeys = self.tableSelectedKeys
        var param = {
          ids: selectedRowKeys,
          userId: 1
        }
        if (selectedRowKeys.length > 0) {
          APPROVALREJECT(param, function (res) {
            self.$message.success(res.message)
            self.reload()
          })
        } else {
          self.$message.warning("请在表格中勾选要审批的数据！")
        }
      },
      accept(record) {
        let self = this
        var param = {
          ids: [record.id],
          userId: 1
        }
        APPROVALACCEPT(param, function (res) {
          self.$message.success(res.message)
          self.reload()

        })
      },
      reject(record) {
        let self = this
        var param = {
          ids: [record.id],
          userId: 1
        }
        APPROVALREJECT(param, function (res) {
          self.$message.success(res.message)
          self.reload()

        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }
</style>
